import { createStyles } from 'antd-style';
import AlertIcon from '@/pages/eventCenter/components/TableCard/AlertIcon.tsx';
import { EventInfo } from '#/entity.ts';
import { FC } from 'react';
import { AlarmHandleStatus } from '#/enmu.ts';
import { ConfigProvider, Descriptions, DescriptionsProps, Image, Tooltip } from 'antd';
import Dot from '@/pages/eventCenter/components/TableCard/Dot.tsx';
import { getColor } from '@/pages/eventCenter/utils.ts';

const useStyle = (bg: string, color: string) => {
  return createStyles(({ css }) => {
    return {
      wrapper: css`
        background-color: var(--ycx-card-bg-color);
      `,
      status: css`
        background-color: ${bg}; /* 设置背景颜色 */
        clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
        position: relative;
      `,
      ellipsis: css`
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      `,
      noBreak: css`
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      `,
      textColor: css`
        color: ${color};
      `,
    };
  });
};

type Props = {
  eventInfo: EventInfo;
};

const TableCard: FC<Props> = ({ eventInfo }) => {
  const color = getColor(eventInfo.handleStatus);
  const { styles } = useStyle(color.ring, color.bg)();

  const items: DescriptionsProps['items'] = [
    {
      key: 'alarmDesc',
      label: '病害类型',
      children: eventInfo.alarmDesc,
      span: 24,
    },
    { key: 'carNo', label: '报警设备', children: eventInfo.carNo, span: 24 },
    {
      key: 'alarmPosition',
      label: '报警位置',
      children: (
        <Tooltip title={eventInfo.alarmPosition}>
          <p className={styles.ellipsis}>{eventInfo.alarmPosition}</p>
        </Tooltip>
      ),
      span: 24,
    },
  ];

  return (
    <div className={`flex flex-col overflow-hidden rounded-lg ${styles.wrapper}`}>
      <div className={`relative flex justify-between`}>
        <div className={`py-1.5 ${styles.status} flex items-center gap-1 pl-7 pr-11 text-xs`}>
          <Dot handleStatus={eventInfo.handleStatus} />
          <p className={`${styles.noBreak} ${styles.textColor}`}>
            {AlarmHandleStatus[eventInfo.handleStatus]}
          </p>
        </div>
        <div className={`flex items-center gap-2 pr-6 pt-1.5 text-xs`}>
          <AlertIcon />
          <span className={styles.noBreak}>{eventInfo.alarmTime}</span>
        </div>
      </div>

      <main className="px-6 pb-6 pt-4">
        <Image
          placeholder={true}
          width="100%"
          height="195px"
          src={`https://oss.uconcern.com/${eventInfo.imageList[0].fileUrl}`}
          style={{ borderRadius: '8px' }}
        />
        <ConfigProvider
          theme={{
            components: {
              Descriptions: { fontSize: 12, colorTextTertiary: 'var(--ycx-font-color-l3)' },
            },
          }}
        >
          <Descriptions items={items} size="small" column={24} />
        </ConfigProvider>
      </main>
    </div>
  );
};

export default TableCard;
